<template>
  <div class="attestation">
    <van-nav-bar
      title="校园认证"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    />
    <div class="main">
      <div class="content">
        <!-- <input type="text" /> -->
        <div class="item">
          <van-form @submit="onSubmit">
            <van-field
              v-model="params.userschoolname"
              name="学校"
              label="学校"
              placeholder="学校名"
              :rules="[{ required: true, message: '请填写学校名' }]"
            />
            <van-field
              v-model="params.usernumber"
              name="学号"
              label="学号"
              placeholder="学号"
              :rules="[{ required: true, message: '请填写学号' }]"
            />
            <van-field
              v-model="params.username"
              name="姓名"
              label="姓名"
              placeholder="姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant"

export default {
  data() {
    return {
      params: {
        userschoolname: "",
        username: "",
        usernumber: "",
      },
    }
  },

  methods: {
    onClickLeft() {
      this.$router.push("/my")
    },

    onSubmit(values) {
      console.log("submit", values)
      /*发送ajax请求查询，是否存在该用户信息*/
      // 1存在 认证成功
      // 2 不存在 提醒暂无该生信息，请联系管理员
      let datas = this.params
      this.$api.my.userAttestation(datas).then((res) => {
        console.log(res)
        res.status === 200
          ? Notify({ type: "success", message: res.msg })
          : Notify({ type: "warning", message: res.msg })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #edf1f8;

  .content {
    width: 18.75rem /* 300/16 */ /* 500/16 */;
    height: 18.75rem /* 300/16 */ /* 500/16 */;
    background-color: #fff;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
    border-radius: 0.9375rem /* 15/16 */;

    .item {
      margin-top: 1.875rem /* 30/16 */;
    }
  }
}
</style>
